<template>
  <el-radio-group v-model="radio" type="vertical" @change="redioChange">
    <el-radio label="1"> 通配符* </el-radio>
    <el-radio label="2"
      >周期从 <el-input-number v-model="startNum" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange" /> -
      <el-input-number v-model="endNum" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange" /> 小时
    </el-radio>
    <el-radio label="3"
      >从 <el-input-number v-model="startSecond" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange" /> 时开始,每
      <el-input-number v-model="everySecond" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange" /> 小时执行一次
    </el-radio>
    <el-radio label="4">指定 </el-radio>

    <div style="margin-left: 40px">
      <el-checkbox-group v-model="checkList" class="checkGroup" size="small" @change="redioChange">
        <el-checkbox label="0" />
        <el-checkbox label="1" />
        <el-checkbox label="2" />
        <el-checkbox label="3" />
        <el-checkbox label="4" />
        <el-checkbox label="5" />
        <el-checkbox label="6" />
        <el-checkbox label="7" />
        <el-checkbox label="8" />
        <el-checkbox label="9" />
        <el-checkbox label="10" />
        <el-checkbox label="11" />
        <el-checkbox label="12" />
        <el-checkbox label="13" />
        <el-checkbox label="14" />
        <el-checkbox label="15" />
        <el-checkbox label="16" />
        <el-checkbox label="17" />
        <el-checkbox label="18" />
        <el-checkbox label="19" />
        <el-checkbox label="20" />
        <el-checkbox label="21" />
        <el-checkbox label="22" />
        <el-checkbox label="23" />
      </el-checkbox-group>
    </div>
  </el-radio-group>
</template>

<script lang="ts" setup>
const radio = ref('1')
const hour = ref('*')
const startNum = ref(0)
const endNum = ref(0)
const startSecond = ref(0)
const everySecond = ref(0)
const checkList = ref([])
const emit = defineEmits(['update:hour'])
let props = defineProps(['hourValue'])
const redioChange = () => {
  hour.value = ''
  switch (radio.value) {
    case '1':
      hour.value = '*'
      break
    case '2':
      hour.value = startNum.value + '-' + endNum.value
      break
    case '3':
      hour.value = startSecond.value + '/' + everySecond.value
      break
    case '4':
      if (checkList.value.length == 0) {
        hour.value = '*'
      } else {
        hour.value = checkList.value.join(',')
      }
      break
    default:
      break
  }
  emit('update:hour', hour)
}
watch(props, () => {
  if (props.hourValue) {
    if (props.hourValue.indexOf('-') != -1) {
      radio.value = '2'
      startNum.value = parseInt(props.hourValue.split('-')[0])
      endNum.value = parseInt(props.hourValue.split('-')[1])
    } else if (props.hourValue.indexOf('/') != -1) {
      radio.value = '3'
      startSecond.value = parseInt(props.hourValue.split('/')[0])
      everySecond.value = parseInt(props.hourValue.split('/')[1])
    } else if (props.hourValue.indexOf(',') != -1) {
      radio.value = '4'
      checkList.value = props.hourValue.split(',')
    } else {
      radio.value = '1'
    }
  }
})
</script>
<style lang="scss" scoped>
.el-radio-group {
  display: grid;
  flex-direction: column;
  margin: 0px;
}
.el-radio {
  margin: 6px;
  padding: 6px;
}
.checkGroup {
  margin: 8px;
}
</style>
